<template>
  <div class="mine_content">
    <!-- 左侧 -->
    <div class="mine_content_left">
      <el-empty description="暂无数据" v-if="postMes.length==0"></el-empty>
      <el-card v-for="pItem in postMes" :key="pItem.pId" v-else>
        <div class="mine_content_left_card" @click.stop="toDetails(pItem)">
          <img :src="pItem.pImg" alt="" class="card_pImg becomeHand" />
          <div class="card_content">
            <h3 class="card_content_des becomeHand">{{ pItem.titleName }}</h3>
            <div
              class="card_content_des becomeHand"
              v-html="pItem.pDescribe"
            ></div>
            <div class="card_content_icon">
              <span class="becomeHand">{{ pItem.tName }}</span>
              <div>
                <i class="iconfont icon-chakan"></i>
                <span>{{ pItem.viewNums }}</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>{{ pItem.replyNums }}</span>
              </div>
              <!-- <div>
                <i class="iconfont icon-icon becomeHand"></i>
                <span>{{ 0 }}</span>
              </div> -->
              <div>
                <i class="el-icon-time"></i>
                <span>{{pItem.pTime}}</span>
                <!-- <span>{{ common.changeTimeFormat(pItem.pTime) }}</span> -->
              </div>
            </div>
          </div>
          <i class="iconfont icon-diandian becomeHand"></i>
        </div>
      </el-card>
    </div>
    <!-- 右侧 -->
    <el-card class="mine_content_right">
      <el-descriptions class="margin-top" title="个人资料" :column="3" border>
        <template slot="extra">
          <el-button type="primary" v-show="isShow" size="small" @click="centerDialogVisible = true">修改密码</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ attrs.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <!-- <i class="el-icon-mobile-phone"></i> -->
            <i class="iconfont icon-youxiang1"></i>
            邮箱
          </template>
          {{ attrs.uEmail }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      destroy-on-close>
      <el-form
      ref="form"
      :model="form"
      :rules="rules"
      class="login_form"
      auto-complete="on"
      label-position="left"
    >
      <el-form-item prop="oldPwd">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="form.oldPwd"
          :type="passwordType"
          placeholder="请先输入旧密码验证"
          name="password"
          tabindex="2"
          auto-complete="on"
          show-password
          prefix-icon="el-icon-magic-stick"
          @change="verifyPwd(attrs.username,form.oldPwd)"
        />
      </el-form-item>
      <el-form-item prop="newPwd">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="form.newPwd"
          :type="passwordType"
          placeholder="请输入新密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          show-password
          prefix-icon="el-icon-magic-stick"
        />
      </el-form-item>
      <el-form-item prop="checkNewPwd">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="form.checkNewPwd"
          :type="passwordType"
          placeholder="请再次输入新密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          show-password
          prefix-icon="el-icon-magic-stick"
          @keyup.enter.native="changePwd(form)"
        />
      </el-form-item>
        <span>
          <el-button @click="resetForm('form')">取 消</el-button>
          <el-button type="primary" @click="changePwd(attrs.username,form.newPwd)">确 定</el-button>
        </span>
    </el-form>

    </el-dialog>
  </div>
</template>
<script>
import { isvalidUsername, isvalidPass } from '../../utils/validate'
export default {
  props: {
    attrs: {
      type: Object,
      default () {
        return {

        }
      }
    }
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!isvalidPass(value)) {
        callback(new Error('密码以字母开头 长度在6~16之间 只能包含字母、数字'))
      } else {
        // return true
        callback();
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      isShow: false,
      passwordType: 'password',
      userInfo: {},
      postMes: [],
      centerDialogVisible: false,
      form: {},
      rules: {
        oldPwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
        newPwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
        checkNewPwd:[{ required: true, validator: validatePass2, trigger: 'blur' }],
      },
      isCheckPwd:false
    }
  },
  created () {
    // console.log(this.cookies.getUid("uId"))
    // console.log(this.attrs.uId)
    if(this.cookies.getUid("uId")==this.attrs.uId){
      this.isShow = true
    }
    this.getPostMes(this.attrs.uId)
  },
  methods: {
    resetForm(form){
      this.centerDialogVisible = false
      // this.form = {}
      this.$refs[form].resetFields()
    },
    changePwd(username,newPwd){
      this.$refs.form.validate(valid =>{
        if(valid){
          // console.log("更改密码")
          var params = {}
          params.username = username
          params.newPwd = newPwd
          if(this.isCheckPwd==true){
            console.log(params)
            this.$axios.revisePwd(params).then(res =>{
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.centerDialogVisible = false
              this.form = {}
              this.logout()
            })
          }else{
            this.$message({
              message: "旧密码输入后不可更改",
              type: 'warning'
            });
          }
        }
      })
    },
    // 退出
    logout () {
      // console.log('退出')
      const params = {}
      params.token = this.cookies.getToken('X-Token')
      this.$axios.logout(params).then(res => {
        // console.log(res)
        this.cookies.removeToken('X-Token')
        this.cookies.removeUid('uId')
        this.$bus.$emit("isLogin",false)
        this.$router.push('/')
        this.reload()
      })
    },
    toDetails (item) {
      console.log(item)
      let params = item
      console.log(params)
      this.$axios.updatePostView(params).then(res => {
        console.log(res)
        let detail = JSON.stringify(res.data)
        this.$router.push({
          path: '/details',
          query: {
            detail
          } // 要传递的参数
        })
      })
    },
    // 获取用户信息
    getUserInfo () {
      const params = {}
      console.log(this.cookies.getToken('X-Token'))
      if (this.cookies.getToken('X-Token') != undefined) {
        params.token = this.cookies.getToken('X-Token')
        this.$axios.getUserInfo(params).then(res => {
          console.log(res)
          this.userInfo = res.data
          this.getPostMes(res.data.uId)
        })
        console.log(this.userInfo)
      }
    },
    // 获取投稿文章
    getPostMes (uId) {
      const params = {}
      console.log(uId)
      params.uId = uId
      params.status = 2
      console.log(params)
      this.$axios.selectPostMesByuId(params).then(res => {
        console.log(res)
        this.postMes = res.data.rows
      })
    },
    verifyPwd(username,oldPwd){
      console.log(username,oldPwd)
      var params = {}
      params.username = username
      params.oldPwd = oldPwd
      this.$axios.verifyPwd(params).then(res=>{
        this.$message(res.message);
        if(res.data==1){
          this.isCheckPwd = true
        }
      })
    },
  }
}
</script>
<style scoped>
.mine_content {
  display: flex;
  margin-top: 10px;
}
.mine_content_left {
  flex: 2;
}
.el-card {
  margin-bottom: 10px;
}
.mine_content_left_card {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.card_pImg {
  width: 150px;
  height: 100px;
  border-radius: 5px;
}
.card_content {
  width: 10px;
  flex: 2;
  padding: 10px;
  font-size: 14px;
}
.card_content_des {
  margin-bottom: 10px;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /*溢出用省略号显示*/
  white-space: nowrap; /*溢出不换行*/
}
.card_content_icon {
  display: flex;
  width: 350px;
  justify-content: space-between;
}
.mine_content_right {
  flex: 1.5;
  height: 200px;
  margin-left: 10px;
  padding: 10px;
}
</style>
